import Tip from "./tip"
import Timer from "./timer"
import reducer from "./reducer"
import { useReducer, useEffect, useRef, useMemo } from "react"
import {
    create_topic_action,
    set_game_state_action,
    set_active_emoji_action,
    set_active_index_action,
    set_correct_index_action,
    reset_emojis_action,
    gain_time_action,
    found_one_action,
    set_playEnd_action,
    found_reset_action
} from "./actionCreator"
import style from "./index.module.css"
import clickSound from "../audio/click-zap_z135YdEd_NWM.mp3"
import foundSound from "../audio/click-double_MkdLYdEd_NWM.mp3"
import refresh_png from "../img/刷新.png"


const Emojis = () => {
    let [state, dispatch] = useReducer(reducer, {
        emojis: [],//表情字符串数组
        gameStart: false,//游戏是否开始
        activeEmoji: '',//当前选中元素的emoji
        activeIndex: -1,//当前选中元素的下标
        correctIndex: -1,//第二个正确的元素的下标,
        time: 60 * 1000,//计时器初始事件 60秒,
        found: 0,//已匹配数目,
        playEnd: false,//是否玩过,
    })
    let { emojis,
        gameStart,
        activeEmoji,
        activeIndex,
        correctIndex,
        time,
        found,
        playEnd } = state

    let click_video = useRef()
    let found_video = useRef()
    useEffect(() => {
        let action = create_topic_action()
        dispatch(action)
    }, [])

    const createClass = (i) => {
        switch (i) {
            case 0:
            case 3:
            case 12:
            case 15:
                return "right_angle"
            case 5:
            case 6:
            case 9:
            case 10:
                return "square"
            default:
                return "side"
        }//类名过滤
    }
    const emojiClass = (i) => {
        if (i === activeIndex && correctIndex === -1) {
            return "active"
        }//只选了第一个
        if (i === activeIndex && correctIndex !== -1) {
            return "correct"
        }//第二个正确的被选择  第一个的class改变
        if (i === correctIndex) {
            return "correct"
        }//正确的项
    }
    const createArea = useMemo(() => {
        return emojis.map((v, i) => {
            return <div className={style[createClass(i)]} key={i}>
                <span className={style[emojiClass(i)]} data-index={i}>{v}</span>
            </div>
        })
    }, [emojis,activeEmoji,activeIndex,correctIndex,])
    //渲染emoji项



    const handleClick = (e) => {
        let { innerText, dataset: { index } } = e.target
        if (!index) {
            // console.log("没有点击span")
            return
        }
        index = Number(index)
        if (gameStart === false) {
            var action = set_game_state_action(true)
            dispatch(action)//开启游戏
        }


        // 第一次点击  点击不相同  点击自身  多次点击第二个正确项
        if (activeEmoji === '' || activeEmoji !== innerText || index === activeIndex || index === correctIndex) {
            if (index === activeIndex || index === correctIndex) {
                return
            }//点击自身  多次点击第二个正确项 不作处理
            click_video.current.play()
            let action = set_active_emoji_action(innerText)
            dispatch(action)
            let action1 = set_active_index_action(index)
            dispatch(action1)
        } else {
            found_video.current.play()
            let action = set_correct_index_action(index)
            dispatch(action)
            let action3 = gain_time_action()
            dispatch(action3)
            let action4 = found_one_action()
            dispatch(action4)
            setTimeout(() => {
                let action1 = reset_emojis_action()
                dispatch(action1)
            }, 500);
            setTimeout(() => {
                let action2 = create_topic_action()
                dispatch(action2)
            }, 501)
        }
        //gameStart是否为false
        //      是:
        //          修改 gameStart 为 true 
        //          游戏定时器打开
        //      否:
        //          不做处理
        //activeEmoji 是否为 ''
        //      是:
        //          获取e.target.innerText 赋值到 activeEmoji
        //          获取e.target.dataset.index 赋值到 activeIndex
        //      否:
        //          获取e.target.innerText 判断 activeEmoji 是否等于 e.target.innerText
        //          是:
        //              获取e.target.dataset.index 赋值到 correctIndex
        //              初始化 emojis activeEmoji activeIndex correctIndex
        //          否:
        //              获取e.target.innerText 替换掉 activeEmoji
        //              获取e.target.dataset.index 替换掉 activeIndex
    }//点击事件

    const rotate = (e) => {
        let dom = e.target
        let angle = +dom.style.transform.replace(/\D/g, "")
        dom.style.transform = `rotate(${angle += 360}deg)`
    }

    const restart = () => {
        let action = set_playEnd_action(false)
        dispatch(action)//隐藏游戏结束界面
        let action1 = gain_time_action(60 * 1000)
        dispatch(action1)//恢复倒计时间
        let action2 = create_topic_action()
        dispatch(action2)//题目重置
        let action3 = found_reset_action()
        dispatch(action3)//配对数重置
    }

    return (
        <div >
            {

                playEnd ? <div className={style.over_box} >
                        <div className={style.over}>game over</div>
                            <div className={style.img_box}>
                                <img src={refresh_png} onClick={(e) => rotate(e)} onTransitionEnd={restart} alt="莫得了"/>
                            </div>
                        </div> : <div>
                        <audio src={clickSound} ref={click_video} preload="true" ></audio>
                        <audio src={foundSound} ref={found_video} preload="true"></audio>
                        <Timer gameStart={gameStart} dispatch={dispatch} time={time} found={found} />
                        <div className={style.container} onClick={(e) => { handleClick(e) }} >
                            {createArea}
                        </div>
                        <Tip acceptData={{ emojis, gameStart }} />
                    </div>
            }
        </div>
    )
}



export default Emojis